<template>
  <VanSubmitBar
    class="the-submit-bar"
    :class="cssClass"
    :button-text="buttonText"
    :button-type="buttonType"
    :placeholder="placeholder"
    :price="isTotalTop ? '' : totalPrice"
    :disabled="noSubmit"
    :label="' '"
    @submit="onSubmit"
  >
    <template #top>
      <slot name="top">
        <BaseSpace
          class="the-submit-bar__num"
          v-if="!isSingle && !isNoPrice"
          fill
          justify="between"
        >
          <BaseSpace size="xs" v-if="!isTotalTop">
            <BaseText size="xs" color="soft" nowrap>{{ singleLabel }}</BaseText>
            <BasePrice :price="price" />
          </BaseSpace>
          <template v-if="isTotalTop">
            <BaseSpace size="xs">
              <BaseText size="md" nowrap>{{ label }}</BaseText>
              <BasePrice size="md" :price="totalPrice / 100" is-primary />
            </BaseSpace>
          </template>
          <VanStepper
            v-if="!isNumLeft"
            v-model="goodsNum"
            min="1"
            :max="maxNum"
          />
        </BaseSpace>
      </slot>
    </template>
    <template #tip v-if="slots.tip">
      <slot name="tip"></slot>
    </template>
    <template v-if="isNumLeft">
      <BaseSpace
        class="the-submit-bar__num the-submit-bar__num--left"
        v-if="!isSingle"
        fill
        justify="between"
      >
        <BaseSpace v-if="!isNoPrice">
          <BaseText size="xs" color="soft">{{ singleLabel }}</BaseText>
          <BasePrice :price="price" />
        </BaseSpace>
        <VanStepper v-model="goodsNum" min="1" :max="maxNum" />
      </BaseSpace>
    </template>
    <template v-if="!isNoPrice && !isTotalTop">
      <BaseText class="the-submit-bar__label" size="xs" color="soft">{{
        label
      }}</BaseText>
    </template>
    <slot></slot>

    <template #button v-if="slots.button">
      <slot name="button"></slot>
    </template>
  </VanSubmitBar>
</template>

<script setup>
import { computed, useSlots, ref, watch } from "vue";
import { canTradeChecking } from "@/utils/authUtils.js";
const emit = defineEmits(["submit", "update:num"]);

let props = defineProps({
  disabled: Boolean,
  buttonText: {
    type: String,
    default: "立即抢购",
  },
  buttonType: {
    default: "primary",
  },
  placeholder: {
    type: Boolean,
    default: true,
  },
  price: {
    type: [Number, String, Boolean],
  },
  label: {
    type: String,
    default: "总价",
  },
  singleLabel: {
    type: String,
    default: "单价",
  },
  isSingle: Boolean,
  maxNum: {
    type: Number,
  },
  isAuthCheck: {
    type: Boolean,
    default: true,
  },
  checkItems: Object,
  isNumLeft: Boolean,
  num: {
    type: Number,
    default: 1,
  },
  isTotalTop: Boolean,
});

let slots = useSlots();

const noSubmit = computed(() => {
  return props.disabled || props.maxNum <= 0;
});

const goodsNum = ref(props.num);

watch(goodsNum, () => {
  emit("update:num", goodsNum.value);
});

const isNoPrice = computed(() => {
  return !props.price && props.price !== 0;
});

const totalPrice = computed(() => {
  return isNoPrice.value
    ? ""
    : Number.parseFloat(props.price) * goodsNum.value * 100;
});

const cssClass = computed(() => {
  return {
    "the-submit-bar--no-price": isNoPrice.value,
  };
});

const onSubmit = async () => {
  let checked = true;

  if (props.isAuthCheck) {
    checked = await canTradeChecking(false, props.checkItems);
  }

  if (checked) {
    emit("submit", {
      num: goodsNum.value,
      price: totalPrice.value / 100,
    });
  }
};
</script>

<style lang="scss" scoped>
.the-submit-bar {
  --van-submit-bar-height: 74px;
  --van-submit-bar-background: var(--dx-color-background);
  --van-submit-bar-button-width: 50vw;
  --van-submit-bar-button-height: 50px;
  --van-submit-bar-price-color: var(--dx-color-text);

  &__num {
    padding: var(--van-padding-md);
    padding-bottom: 0;

    &--left {
      padding: 0;
      margin-right: var(--dx-gap-md);
    }
  }

  &__label {
    position: absolute;
    top: var(--dx-gap-xs);
    left: var(--van-padding-md);
  }

  &--no-price {
    ::v-deep(.van-submit-bar__button) {
      flex: 1;
    }
  }

  .van-stepper {
    white-space: nowrap;
  }

  ::v-deep(.van-submit-bar) {
    border-top: var(--dx-border);
  }
  ::v-deep(.van-submit-bar__bar) {
    position: relative;
  }
  ::v-deep(.van-submit-bar__button) {
    border-radius: var(--dx-radius-sm);
  }
  ::v-deep(.van-submit-bar__text) {
    text-align: left;
  }
  ::v-deep(.van-submit-bar__price) {
    font-size: var(--van-submit-bar-price-integer-font-size);
    color: var(--dx-color-primary);
    margin-left: 0;
  }
  ::v-deep(.van-submit-bar__price-integer) {
    margin-left: var(--dx-gap-xs);
  }
}
</style>
